<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图书管理系统</title>
        <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
        <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
        <link rel="shortcut icon" href="favicon.ico">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
        <link href="css/animate.min.css" rel="stylesheet">
        <link href="css/style.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/mricode.pagination.css" />
        <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
        <link href="css/mine.css" rel="stylesheet">
    </head>
    <body class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight" id="main">
            <div class="row table_box">
                <div class="ibox float-e-marginss">
                    <div class="ibox-title">
                        <h5>管理员列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content cl">
                        <div class="mb_10 cl">
                            <a class="btn btn-outline btn-info btn-sm J_menuItem f_l" href="admin_edit.html">添加数据</a>
                            <div class="col-sm-3 f_r">
                                <div class="input-group">
                                    <input type="text" placeholder="请输入账号" class="input-sm form-control"
                                        v-model="dataSearch">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary" @click="getData()"> 搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <table class="table table-striped table_center">
                            <thead>
                                <tr align="center">
                                    <th width="80">ID</th>
                                    <th>账号</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item of dataList" :key="item.id" align="center">
                                    <td>{{item.Id}}</td>
                                    <td>{{item.Name}}</td>
                                    <td>{{item.CreatedDate}}</td>
                                    <td :id="item.Id">
                                        <a class="btn btn-outline btn-warning btn-xs operate" href="#"
                                            data-type="edit">编辑</a>
                                        <a class="btn btn-outline btn-danger btn-xs operate" href="#"
                                            data-type="delete">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pager_box" id="page-4"></div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/plugins/peity/jquery.peity.min.js"></script>
        <!-- <script src="js/content.min.js"></script> -->
        <script src="js/demo/peity-demo.min.js"></script>
        <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
        <script src="js/pack.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="js/mricode.pagination.js"></script>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            data: {
                dataList: [],
                dataSearch: ''
            },
            created() {
                this.getData();
            },
            methods: {
                getData(data) {
                    data = data || {};
                    data = this.dataSearch ? Object.assign(data, { name: this.dataSearch, pageIndex: 1 }) : data ;
                    pack.http('GET', 'http://localhost:7002/v1/admin/getAdmins', data, (res, err) => {
                        const result = res.results;
                        this.dataList = result.results;

                        this.$nextTick(() => {
                            operate();
                            pager(result);
                        });
                    });
                }
            }
        }).$mount("#main");

        // 数据操作
        function operate() {
            $(".operate").click(function (ev) {
                const type = ev.currentTarget.dataset.type;
                const id = $(this).parent().attr('id');
                if (type === 'delete') {
                    swal({
                        title: "您确定要删除这条信息吗",
                        text: "删除后将无法恢复，请谨慎操作！",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "确认",
                        cancelButtonText: "取消",
                        closeOnConfirm: false
                    }, () => {
                        pack.http('DELETE', 'http://localhost:7002/v1/admin/deleteAdmin', { Id: id }, (res, err) => {
                            swal("删除成功", "", "success");
                            vm.getData();
                        });
                    });
                } else {
                    window.location.href = 'admin_edit.html?id=' + id;
                }
            });
        }

        // 分页
        function pager(param) {
            if (!$("#page-4").pagination()) {
                $("#page-4").pagination({
                    pageIndex: 0,
                    pageSize: param.pageSize,
                    total: param.totalCount,
                    showInfo: true,
                    showPageSizes: true
                });
            }
            else{
                $("#page-4").pagination('render',param.totalCount);
            }
        }
        $("#page-4").on("pageClicked", function (event, data) {
            vm.getData({
                pageIndex: data.pageIndex+1,
                pageSize: data.pageSize
            });
        })
    </script>
</html>